<template>

  <div class="chat_form">
    <div class="menu">
      <img id="avatar" :src="avatar"/>
    </div>
    <div class="container">
      <div class="person_list"></div>
      <div class="chat_title"><span style="margin-left: 20px">王强</span></div>
    </div>
  </div>
</template>

<script>
import {get_info} from "@/utils/info";

export default {
  name: "im",
  data() {
    return {
      avatar: "",
      nickname: "",
    }
  },
  mounted() {
    let info = get_info();
    this.avatar = info.avatar;

  }
}
</script>

<style scoped>
.chat_form {
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

.menu {
  width: 80px;
  height: 600px;
  margin: 50px 380px;
  background-color: #282828;
  position: absolute;
}

.chat_title {
  position: absolute;
  height: 60px;
  width: 536px;
  background-color: #F0FFFF;
  margin-left: 265px;
  color: #282828;
  line-height: 60px;
  font-size: 20px;


}

.person_list {
  width: 265px;
  height: 600px;

  background-color: #F0F8FF;
  position: absolute;
}

.container {
  width: 800px;
  height: 600px;
  background-color: #2EFEC8;
  margin-top: 50px;
  margin-left: 450px;
  position: absolute;
}

#avatar {
  width: 35px;
  height: 35px;
  margin-left: 16px;
  margin-top: 20px;
}

</style>
